<template>
  <div class="baseContainer">
    <div v-show="isBack" class="back">
      <img @click="backPrev" @mouseenter="initTimeout" @mouseleave="removeTimeout" src="@/assets/home/ico_back.png" alt="" />
    </div>
    <div v-show="isBackmore" class="backmore">
      <div @click="toPage('/homePage')" class="backbox">
        <img src="@/assets/home/ico_mars1.png" alt="" />
        <div class="backtext">基地列表</div>
      </div>
      <div @click="toPage('/basePage')" class="backbox">
        <img src="@/assets/home/ico_mars2.png" alt="" />
        <div class="backtext">基地</div>
      </div>
      <div @click="toPage('/modelPage')" class="backbox">
        <img src="@/assets/home/ico_mars3.png" alt="" />
        <div class="backtext">近景</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import icoMark from '@/assets/home/ico_mark.png'

  let viewer = window.cesium?.viewer

  const router = useRouter()
  let isBack = ref(false)
  let isBackmore = ref(false)
  let setIntervalID = null
  let timeoutId = null

  const showGltf = () => {
    if(!viewer) {
      router.push('/')
      return
    }

    viewer.entities.removeAll()
    viewer.camera.flyTo({
      destination: {
        x: 637156.6609798631,
        y: 4917504.70268792,
        z: 4102032.045211392,
      },
      orientation: {
        heading: 3.2301175765196266, // 方向
        pitch: -0.5411500792319659, // 视角
        roll: 6.2831746997588205, // 倾斜角度
      },
      duration: 5,
    })

    setTimeout(() => {
      isBack.value = true
    }, 5000)

    setTimeout(() => {
      showCangti()
      showJiance()
    }, 1000);
  }

  const showCangti = () => {
    const position = Cesium.Cartesian3.fromDegrees(82.68685606369701, 38.71765126280687, 200)
    const heading = Cesium.Math.toRadians(-50) // y轴 水平旋转
    const pitch = Cesium.Math.toRadians(0) // x轴 上下旋转
    const roll = 0 // z轴旋转
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

    let cangti = new Cesium.Entity({
      name: "cangti",
      position: position,
      orientation: orientation,
      model: {
        uri: "/Mars/cangti.glb",
        scale: 1.5, // 缩放比例
        minimumPixelSize: 128, // 最小像素
        maximumScale: 2000, // 最大比例尺大小
        incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
        runAnimations: true, // 是否启动模型中的gltf动画
        clampAnimations: true, // 制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
        shadows: Cesium.ShadowMode.ENABLED, // 阴影模式
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 高度模式
      },
    })
    viewer.entities.add(cangti)
    
    nextTick(() => {
      // 添加实体
      var setIntervalEntity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(82.50398855679425, 38.78675251523275),
        point: {
          color: 'rgba(0, 0, 0, 0)',
          pixelSize: 1
        }
      });

      if(setIntervalID) {
        clearInterval(setIntervalID)
      }

      let initialHeading = 181;
      // 步长
      let step = 0.05;
      setIntervalID = setInterval(() => {
        if (initialHeading > 545) {
          initialHeading = 181;
        }
        var offset = new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(initialHeading),
          -Cesium.Math.toRadians(30),
          130000
        );
        viewer.zoomTo(setIntervalEntity, offset);
        initialHeading += step;
      }, step * 1000);
    })
    
    const point = viewer.entities.add({
      id: "mark2",
      name: "穿透点",
      position: Cesium.Cartesian3.fromDegrees(82.67097834076704, 38.70554434515157),
      billboard: {
        image: icoMark,
        width: 30,
        height: 30,
        show: true,
        scale: 1.0,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 禁用深度测试
      },
    })

    // 标点 点击事件
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction(movement => {
      var pick = viewer.scene.pick(movement.position)
      if (Cesium.defined(pick) && pick.id?.id === "mark2") {
        // 删除标记点
        viewer.entities.removeAll()
        isBack.value = false
        toModel()
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    // 设置鼠标移入标点后 鼠标样式
    viewer.screenSpaceEventHandler.setInputAction(movement => {
      var pickedObject = viewer.scene.pick(movement.endPosition)
      var element = viewer.canvas
      if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && pickedObject.id.id === "mark2") {
        element.style.cursor = "pointer"
      } else {
        element.style.cursor = "default"
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  }

  const showJiance = () => {
    const position = Cesium.Cartesian3.fromDegrees(82.36064455780905, 38.93506305838083, 2000)
    const heading = Cesium.Math.toRadians(-20) // y轴 水平旋转
    const pitch = Cesium.Math.toRadians(0) // x轴 上下旋转
    const roll = 0 // z轴旋转
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

    const jiance = new Cesium.Entity({
      name: "jiance",
      position: position,
      orientation: orientation,
      model: {
        uri: "/Mars/jiance.glb",
        scale: 1.0, // 缩放比例
        minimumPixelSize: 128, // 最小像素
        maximumScale: 2000, // 最大比例尺大小
        incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
        runAnimations: true, // 是否启动模型中的gltf动画
        clampAnimations: true, // 制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
        shadows: Cesium.ShadowMode.ENABLED, // 阴影模式
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 高度模式
      },
    })
    viewer.entities.add(jiance)
  }

  // 返回按钮
  const backPrev = () => {
    viewer.entities.removeAll()
    router.push("/homePage")
  }

  // 返回按钮 其他操作
  const initTimeout = () => {
    timeoutId = setTimeout(() => {
      isBackmore.value = true
    }, 1000)
  }

  const removeTimeout = () => {
    if (timeoutId) {
      clearTimeout(timeoutId)
      timeoutId = null
      setTimeout(() => {
        isBackmore.value = false
      }, 1500)
    }
  }

  const toPage = (page) => {
    if(page == '/modelPage') {
      viewer.entities.removeAll()

      toModel()
    } else if(page != '/basePage') {
      viewer.entities.removeAll()
      router.push(page)
    }
  }

  const toModel = () => {
    viewer.camera.flyTo({
      destination: {
        x: -37137216.80922687,
        y: 1618381331.651671,
        z: 1657576830.224716,
      },
      orientation: {
        heading: 3.166570140698239, // 方向
        pitch: -1.4934680791280552, // 视角
        roll: 6.282767643266141, // 倾斜角度
      },
      duration: 3,
    })
    setTimeout(() => {
      router.push("/modelPage")
    }, 2500);
  }

  onMounted(() => {
    showGltf()
  })

  onBeforeUnmount(() => {
    if(setIntervalID) {
      clearInterval(setIntervalID)
    }
    if(viewer) {
      viewer.entities.removeAll()
    }
  })
</script>

<style lang="scss" scoped>
  .back {
    position: fixed;
    right: 58px;
    bottom: 36px;

    img {
      width: 115px;
      height: 110px;
      cursor: pointer;
    }
  }

  .backmore {
    position: fixed;
    right: 58px;
    bottom: 155px;

    .backbox {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .backtext {
        background-image: url("@/assets/home/img_backmore_bg.png");
        background-size: 100% 100%;
        background-position: left center;
        background-repeat: no-repeat;
        font-size: 16px;
        font-weight: bold;
        color: #effff7;
        line-height: 20px;
        padding: 9px 0 8px 42Px;
        margin-bottom: 10px;
        width: 115Px;
      }
    }
  }
</style>
